<template>
  <div class="form-element" style="margin-top:100px">
    <div class="col-md-12 padding-0">
      <div class="col-md-12">

        <div class="panel form-element-padding">
          <div style="margin-left:450px;margin-top:20px;">

            <el-steps :active="active" finish-status="success" style="width:500px">
              <el-step title="步骤 1"></el-step>
              <el-step title="步骤 2"></el-step>
            </el-steps>
          </div>
          <div class="page-register" style="text-align:center;color:whitesmoke">


            <section style="text-align: center" >
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
                autocomplete="off"
              >
                <div v-if="active == 0" style="margin-left: 120px">
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="ruleForm.phone" type="phone"/>
                  </el-form-item>

                  <el-form-item label="验证" prop="isLock">
                    <slider-verify-code
                      v-model="ruleForm.isLock"
                      @change="handlerLock"
                    ></slider-verify-code>
                  </el-form-item>

                  <el-form-item prop="agreed">
                    <el-checkbox v-model="ruleForm.agreed">同意注册协议</el-checkbox>
                  </el-form-item>
                  <el-button

                    v-if="active < step - 1"
                    type="danger"
                    icon="el-icon-arrow-right"
                    @click="next"
                  >下一步
                  </el-button>
                  <span class="login">
          <em class="bold" style="color: dimgrey">已有账号？</em>
          <a href="/passengerLogin">
            <el-button  size="small">登录</el-button>
          </a>
        </span>
                </div>
                <div v-if="active == 1" style="margin-left:100px">
                  <el-form-item label="真实姓名" prop="passenger">
                    <el-input v-model="ruleForm.passengerName"/>
                  </el-form-item>
                  <el-form-item label="身份证" prop="cardId">
                    <el-input v-model="ruleForm.cardId"/>
                  </el-form-item>

                  <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password"/>
                  </el-form-item>

                  <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="ruleForm.confirmPassword" type="password"/>
                  </el-form-item>
                </div>
              </el-form>
              <div style="margin-left:200px;">
                <el-button
                  v-if="active > 0"
                  type="waring"
                  plain
                  icon="el-icon-arrow-left"
                  @click="prev"
                >上一步
                </el-button>
                <el-button v-if="active == step - 1" type="warning" @click="register"
                >完成注册
                </el-button
                >
              </div>

            </section>

              <div class="error">{{ error }}</div>

          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import sliderVerifyCode from "@/components/slider-verify-code.vue";

export default {
  data() {
    return {
      step: 2,
      active: 0,
      statusMsg: "",
      error: "",
      textarea: "请仔细阅读以下协议",
      ruleForm: {
        passengerId: null,
        ardId: null,
        passengerName: null,
        phone: null,
        password: null,
        avatarImg: null,
        nickName: null,
        city: null,
        email: null,
        wechat: null,
        agreed: false,
        isLock: false,
        confirmPassword: null,
      },
      rules: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入手机号"));
              } else {
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(value)) {
                  callback(new Error("请输入有效的手机号码"));
                }
              }
            },
            trigger: "blur",
          },
        ],

        agreed: [
          {
            validator: (rule, value, callback) => {
              console.log("value:" + value);
              if (value == false) {
                callback(new Error("请确认同意注册协议"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],


        passengerName: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入真实姓名"));
              } else {
                var reg = /^[\u4e00-\u9fa5]+$/;
                if (value.length < 5 && reg.test(value)) {
                  callback();
                } else {
                  return callback(new Error("请输入正确的中文名"));
                }
              }
            },
            trigger: "blur",
          },
        ],

        cardId: [
          {
            required: true,
            message: "请输入正确身份证号",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入身份证号"));
              } else {
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if (value.length == 18 && reg.test(value)) {
                  callback();
                } else {
                  return callback(new Error("请输入正确的身份证号"));
                }
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "创建密码",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            message: "确认密码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {

              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        isLock: [{
          validator: (rule, value, callback) => {
            if (value == false) {
              return callback(new Error("请拖动滑块完成验证"));
            } else {
              callback()
            }
          },
          trigger: "blur"

        }]
      },
    };
  },
  layout: "blank",

  components:
    {
      "slider-verify-code":
      sliderVerifyCode,
    }
  ,
  methods: {

    prev() {
      this.active--;
    }
    ,

    next() {
      const resArr = [];
      this.$refs.ruleForm.validateField(["agreed", "phone", "isLock"], (valid) => {
        resArr.push(valid);
      });
      //所有valid等於空字符串時通過校驗
      if (resArr.every((v) => v === "")) {
        // 通過校驗後的操作
        this.active++;
      }
    }
    ,
    // 模拟登录
    register: function () {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const _this = this
          this.$axios.post('http://localhost:8181/passenger/register', this.ruleForm).then((resp) => {
            if (resp.data == 'success') {
              _this.$message({
                type: 'success',
                message: '注册成功'
              })
            }
            this.$router.replace('/passengerLogin')
          })
        }
      });
    }
    ,
    handlerLock(data) {
      if (data) {
        this.$refs.ruleForm.validateField('isLock');
      }
    }
    ,
  }
  ,
}

</script>

<style rel="stylesheet/scss" lang="scss">
.page-register {
  margin-left: 400px;

  .header {
    //border-bottom: 2px solid rgb(235, 232, 232);
    min-width: 980px;
    color: #666;

    header {
      margin: 0 auto;
      padding: 10px 0;
      width: 980px;

      .login {
        float: right;
      }

      .bold {
        font-style: normal;
      }
    }
  }

  .register {
    color: #1890ff;
  }

  a {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color 0.3s;
  }

  > section {
    margin: 0 auto 30px;
    padding-top: 30px;
    width: 980px;
    min-height: 300px;
    padding-right: 550px;
    box-sizing: border-box;

    .status {
      font-size: 12px;
      margin-left: 20px;
      color: #e6a23c;
    }

    .error {
      color: red;
    }
  }

  .footer {
    text-align: center;
  }
}
</style>

